<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数通的吐槽小屋</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }
        
        .header p {
            font-size: 1.1em;
            opacity: 0.9;
        }
        
        .content {
            padding: 30px;
        }
        
        .post-form {
            margin-bottom: 30px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #333;
        }
        
        .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 16px;
            resize: vertical;
            min-height: 120px;
            font-family: inherit;
        }
        
        .form-group textarea:focus {
            outline: none;
            border-color: #667eea;
        }
        
        .submit-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 25px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: block;
            margin: 0 auto;
        }
        
        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }
        
        .posts {
            margin-top: 30px;
        }
        
        .post {
            background: #f9f9f9;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }
        
        .post:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .post-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .post-username {
            font-weight: bold;
            color: #667eea;
            font-size: 1.1em;
        }
        
        .post-time {
            color: #999;
            font-size: 0.9em;
        }
        
        .post-content {
            color: #333;
            line-height: 1.6;
        }
        
        .empty-state {
            text-align: center;
            padding: 40px;
            color: #999;
        }
        
        .empty-state i {
            font-size: 3em;
            margin-bottom: 15px;
            color: #ddd;
        }
        
        .footer {
            text-align: center;
            padding: 20px;
            color: #999;
            font-size: 0.9em;
            border-top: 1px solid #eee;
        }
        
        /* 响应式设计 */
        @media (max-width: 600px) {
            .container {
                margin: 10px;
            }
            
            .header h1 {
                font-size: 2em;
            }
            
            .content {
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>数通的吐槽小屋</h1>
            <p>在这里尽情吐槽，没人知道你是谁</p>
        </div>
        
        <div class="content">
            <div class="post-form">
                <div class="form-group">
                    <label for="post-content">想吐槽什么？</label>
                    <textarea id="post-content" placeholder="在这里写下你想说的话..."></textarea>
                </div>
                <button class="submit-btn" onclick="submitPost()">发布吐槽</button>
            </div>
            
            <div class="posts" id="posts-container">
                <div class="empty-state">
                    <div style="font-size: 3em; margin-bottom: 15px;">📝</div>
                    <p>还没有人吐槽，快来成为第一个吧！</p>
                </div>
            </div>
        </div>
        
        <div class="footer">
            <p>© 2024 数通的吐槽小屋 - 所有内容将在30天后自动删除</p>
        </div>
    </div>

    <script>
        // 生成随机用户名
        function generateUsername() {
            const adjectives = ['神秘', '孤独', '快乐', '忧郁', '疯狂', '安静', '活泼', '内向', '外向', '聪明', '笨拙', '勇敢', '胆小', '善良', '邪恶', '可爱', '帅气', '美丽', '普通', '特别'];
            const nouns = ['旅人', '行者', '观察者', '思考者', '梦想家', '冒险家', '探索者', '记录者', '倾诉者', '倾听者', '分享者', '收藏家', '艺术家', '科学家', '哲学家', '诗人', '音乐家', '画家', '作家', '读者'];
            const numbers = Math.floor(Math.random() * 1000);
            
            const adjective = adjectives[Math.floor(Math.random() * adjectives.length)];
            const noun = nouns[Math.floor(Math.random() * nouns.length)];
            
            return `${adjective}${noun}${numbers}`;
        }
        
        // 获取或创建用户名
        function getUsername() {
            const usernameKey = 'treehole_username';
            const usernameTimeKey = 'treehole_username_time';
            const currentTime = new Date().getTime();
            const oneDay = 24 * 60 * 60 * 1000; // 24小时
            
            let username = localStorage.getItem(usernameKey);
            let usernameTime = localStorage.getItem(usernameTimeKey);
            
            // 如果没有用户名或时间超过24小时，生成新用户名
            if (!username || !usernameTime || (currentTime - parseInt(usernameTime)) > oneDay) {
                username = generateUsername();
                localStorage.setItem(usernameKey, username);
                localStorage.setItem(usernameTimeKey, currentTime.toString());
            }
            
            return username;
        }
        
        // 格式化时间
        function formatTime(timestamp) {
            const date = new Date(timestamp);
            const now = new Date();
            const diff = now - date;
            
            if (diff < 60000) { // 1分钟内
                return '刚刚';
            } else if (diff < 3600000) { // 1小时内
                return Math.floor(diff / 60000) + '分钟前';
            } else if (diff < 86400000) { // 1天内
                return Math.floor(diff / 3600000) + '小时前';
            } else if (diff < 2592000000) { // 30天内
                return Math.floor(diff / 86400000) + '天前';
            } else {
                return date.toLocaleDateString();
            }
        }
        
        // 提交帖子
        function submitPost() {
            const content = document.getElementById('post-content').value.trim();
            
            if (!content) {
                showMessage('请输入吐槽内容');
                return;
            }
            
            const username = getUsername();
            const timestamp = new Date().getTime();
            
            // 获取现有帖子
            let posts = JSON.parse(localStorage.getItem('treehole_posts') || '[]');
            
            // 添加新帖子
            posts.unshift({
                username: username,
                content: content,
                timestamp: timestamp
            });
            
            // 保存帖子
            localStorage.setItem('treehole_posts', JSON.stringify(posts));
            
            // 清空输入框
            document.getElementById('post-content').value = '';
            
            // 刷新帖子列表
            loadPosts();
            
            showMessage('吐槽发布成功！');
        }
        
        // 加载帖子
        function loadPosts() {
            const postsContainer = document.getElementById('posts-container');
            const posts = JSON.parse(localStorage.getItem('treehole_posts') || '[]');
            
            // 清空过期帖子（30天前）
            const thirtyDaysAgo = new Date().getTime() - (30 * 24 * 60 * 60 * 1000);
            const validPosts = posts.filter(post => post.timestamp > thirtyDaysAgo);
            
            if (validPosts.length !== posts.length) {
                localStorage.setItem('treehole_posts', JSON.stringify(validPosts));
            }
            
            // 如果没有帖子，显示空状态
            if (validPosts.length === 0) {
                postsContainer.innerHTML = `
                    <div class="empty-state">
                        <div style="font-size: 3em; margin-bottom: 15px;">📝</div>
                        <p>还没有人吐槽，快来成为第一个吧！</p>
                    </div>
                `;
                return;
            }
            
            // 渲染帖子列表
            postsContainer.innerHTML = validPosts.map(post => `
                <div class="post">
                    <div class="post-header">
                        <span class="post-username">${post.username}</span>
                        <span class="post-time">${formatTime(post.timestamp)}</span>
                    </div>
                    <div class="post-content">${escapeHtml(post.content)}</div>
                </div>
            `).join('');
        }
        
        // 转义HTML
        function escapeHtml(text) {
            const map = {
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#039;'
            };
            return text.replace(/[&<>"']/g, m => map[m]);
        }
        
        // 显示消息
        function showMessage(message) {
            const messageDiv = document.createElement('div');
            messageDiv.style.cssText = `
                position: fixed;
                top: 20px;
                left: 50%;
                transform: translateX(-50%);
                background: #333;
                color: white;
                padding: 12px 24px;
                border-radius: 25px;
                z-index: 1000;
                box-shadow: 0 4px 12px rgba(0,0,0,0.2);
                animation: fadeInOut 3s ease-in-out;
            `;
            messageDiv.textContent = message;
            
            // 添加动画样式
            const style = document.createElement('style');
            style.textContent = `
                @keyframes fadeInOut {
                    0% { opacity: 0; transform: translate(-50%, -20px); }
                    20% { opacity: 1; transform: translate(-50%, 0); }
                    80% { opacity: 1; transform: translate(-50%, 0); }
                    100% { opacity: 0; transform: translate(-50%, -20px); }
                }
            `;
            document.head.appendChild(style);
            
            document.body.appendChild(messageDiv);
            
            // 3秒后移除消息
            setTimeout(() => {
                document.body.removeChild(messageDiv);
                document.head.removeChild(style);
            }, 3000);
        }
        
        // 页面加载时加载帖子
        window.onload = function() {
            loadPosts();
        };
        
        // 监听回车键提交
        document.getElementById('post-content').addEventListener('keydown', function(e) {
            if (e.key === 'Enter' && e.ctrlKey) {
                submitPost();
            }
        });
    </script>
</body>
</html>
